CSS Grid டிராக் செயல்பாடுகளில் தேர்ச்சி பெறுதல்: உலகளாவிய வலை வடிவமைப்பிற்கான டைனமிக் லேஅவுட் அளவு கணக்கீடு

CSS Grid லேஅவுட், வலை வடிவமைப்பை நாம் அணுகும் விதத்தில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளது, இது சிக்கலான மற்றும் ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்குவதில் இணையற்ற கட்டுப்பாடு மற்றும் நெகிழ்வுத்தன்மையை வழங்குகிறது. CSS Grid-இன் ஆற்றலின் மையத்தில் அதன் டிராக் செயல்பாடுகள் உள்ளன – fr, minmax(), மற்றும் auto – இவை கிரிட் வரிசைகள் மற்றும் நெடுவரிசைகளுக்கு டைனமிக் மற்றும் அறிவார்ந்த அளவு கணக்கீடுகளைச் செய்ய உதவுகின்றன. வெவ்வேறு திரை அளவுகள், உள்ளடக்க அளவுகள், மற்றும் சர்வதேசமயமாக்கல் தேவைகளுக்கு ஏற்ப தடையின்றி மாற்றியமைக்கக்கூடிய லேஅவுட்களை உருவாக்க இந்த செயல்பாடுகளைப் புரிந்துகொண்டு திறம்படப் பயன்படுத்துவது மிகவும் முக்கியமானது.

CSS Grid டிராக்குகளைப் புரிந்துகொள்ளுதல்

குறிப்பிட்ட டிராக் செயல்பாடுகளுக்குள் செல்வதற்கு முன், ஒரு CSS Grid டிராக் என்றால் என்ன என்பதை வரையறுப்போம். சாராம்சத்தில், ஒரு டிராக் என்பது இரண்டு கிரிட் கோடுகளுக்கு இடையிலான இடமாகும். இந்த இடம் grid-template-rows அல்லது grid-template-columns உடன் நீங்கள் வேலை செய்கிறீர்களா என்பதைப் பொறுத்து ஒரு வரிசை அல்லது நெடுவரிசையைக் குறிக்கலாம். டிராக் செயல்பாடுகள் இந்த வரிசைகள் மற்றும் நெடுவரிசைகளின் அளவைத் தீர்மானிக்கின்றன, கிரிட் கன்டெய்னருக்குள் இடம் எவ்வாறு விநியோகிக்கப்படுகிறது என்பதை வரையறுக்கின்றன.

fr அலகு: பின்ன இட ஒதுக்கீடு

fr அலகு CSS Grid-இன் டைனமிக் அளவு மாற்றும் திறன்களின் ஒரு மூலக்கல்லாகும். இது கிரிட் கன்டெய்னரில் உள்ள கிடைக்கக்கூடிய இடத்தின் ஒரு பின்னத்தைக் குறிக்கிறது. பிக்சல்கள் அல்லது ems போன்ற நிலையான அலகுகளைப் போலல்லாமல், fr அலகு கிரிட் டிராக்குகளுக்கு இடையில் விகிதாசாரமாக இடத்தை விநியோகிக்கிறது. இது வியூபோர்ட் அல்லது கன்டெய்னர் அளவிற்கு ஏற்ப உறுப்புகளின் அளவு மாறும் நெகிழ்வான லேஅவுட்களை உருவாக்குவதற்கு ஏற்றதாக அமைகிறது.

fr எவ்வாறு செயல்படுகிறது

fr அலகு, மொத்த கிரிட் கன்டெய்னர் அளவிலிருந்து நிலையான அளவு டிராக்குகள் எடுத்துக்கொண்ட இடத்தை கழித்து, கிடைக்கக்கூடிய இடத்தைக் கணக்கிடுகிறது. மீதமுள்ள இடம் பின்னர் ஒவ்வொரு டிராக்கிற்கும் ஒதுக்கப்பட்ட fr மதிப்புகளின் அடிப்படையில் விகிதாசாரமாக பிரிக்கப்படுகிறது.

எடுத்துக்காட்டு: எளிய மூன்று-நெடுவரிசை லேஅவுட்

ஒரு எளிய மூன்று-நெடுவரிசை லேஅவுட்டைக் கருத்தில் கொள்ளுங்கள், அங்கு முதல் நெடுவரிசை கிடைக்கக்கூடிய இடத்தில் பாதியை எடுத்துக்கொள்ள வேண்டும், மீதமுள்ள இரண்டு நெடுவரிசைகள் ஒவ்வொன்றும் கால் பங்கை எடுத்துக்கொள்ள வேண்டும்.

            .grid-container {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், முதல் நெடுவரிசைக்கு 2fr ஒதுக்கப்பட்டுள்ளது, மற்ற இரண்டுக்கும் தலா 1fr ஒதுக்கப்பட்டுள்ளது. மொத்த பின்னங்களின் எண்ணிக்கை 4 (2 + 1 + 1). எனவே, முதல் நெடுவரிசை கிடைக்கக்கூடிய இடத்தில் 50% (2/4) எடுத்துக்கொள்ளும், மீதமுள்ள நெடுவரிசைகள் ஒவ்வொன்றும் 25% (1/4) எடுத்துக்கொள்ளும்.

fr உடன் நிலையான-அளவு டிராக்குகளைக் கையாளுதல்

நீங்கள் fr அலகுகளை நிலையான-அளவு டிராக்குகளுடன் இணைக்கலாம். உங்களுக்கு 200px நிலையான அகலம் கொண்ட ஒரு சைட்பாரும், மீதமுள்ள இடத்தை எடுத்துக்கொள்ளும் ஒரு முக்கிய உள்ளடக்கப் பகுதியும் வேண்டும் என்று வைத்துக்கொள்வோம்.

            .grid-container {
 display: grid;
 grid-template-columns: 200px 1fr;
}

            

              
                Copy
              
            
          

இங்கே, சைட்பார் எப்போதும் 200px அகலமாக இருக்கும், மற்றும் முக்கிய உள்ளடக்கப் பகுதி மீதமுள்ள இடத்தை நிரப்ப விரிவடையும். கிரிட் கன்டெய்னர் 800px அகலமாக இருந்தால், முக்கிய உள்ளடக்கப் பகுதி 600px அகலமாக இருக்கும் (800px - 200px = 600px).

சர்வதேசமயமாக்கலும் fr-ம்

fr அலகு சர்வதேசமயமாக்கப்பட்ட உள்ளடக்கத்தைக் கையாள்வதில் குறிப்பாக பயனுள்ளதாக இருக்கிறது, அங்கு வெவ்வேறு மொழிகளில் உரையின் நீளம் கணிசமாக மாறுபடலாம். fr ஐப் பயன்படுத்துவதன் மூலம், உங்கள் லேஅவுட் வடிவமைப்பை உடைக்காமல் நீண்ட அல்லது குறுகிய உரை சரங்களுக்கு இடமளிக்கும் வகையில் மாற்றியமைக்கப்படுவதை உறுதிசெய்யலாம். உதாரணமாக, ஜெர்மன் வார்த்தைகள் அவற்றின் ஆங்கில समकक्षங்களை விட நீளமாக இருக்கும். நிலையான அகலங்களுடன் வடிவமைக்கப்பட்ட ஒரு லேஅவுட் ஆங்கிலத்தில் அழகாகத் தோன்றலாம், ஆனால் ஜெர்மன் மொழியில் முற்றிலும் சிதைந்து போகலாம். fr ஐப் பயன்படுத்துவது இந்த சிக்கலைத் தணிக்க உதவுகிறது.

எடுத்துக்காட்டு: நெகிழ்வான வழிசெலுத்தல் மெனு

பல உருப்படிகளைக் கொண்ட ஒரு வழிசெலுத்தல் மெனுவை கற்பனை செய்து பாருங்கள். மெனு அதன் கன்டெய்னரின் முழு அகலத்தையும் நிரப்ப வேண்டும், உருப்படிகளுக்கு இடையில் சமமாக இடத்தை விநியோகிக்க வேண்டும்.

            .nav-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* or auto-fill */
 gap: 10px; /* optional gap */
}

            

              
                Copy
              
            
          

இது ஒவ்வொரு மெனு உருப்படியும் அதன் உரை லேபிளின் நீளத்தைப் பொருட்படுத்தாமல், கிடைக்கக்கூடிய இடத்தின் சமமான பகுதியை எடுத்துக்கொள்வதை உறுதி செய்கிறது. minmax(100px, 1fr) ஒவ்வொரு உருப்படிக்கும் குறைந்தபட்சம் 100px அகலம் இருப்பதை உறுதிசெய்கிறது, ஆனால் மீதமுள்ள இடத்தை விகிதாசாரமாக நிரப்ப விரிவடையலாம். `auto-fit` முக்கியச்சொல் கன்டெய்னர் அளவு மற்றும் உள்ளடக்கத்தின் அடிப்படையில் நெடுவரிசைகளின் எண்ணிக்கையை சரிசெய்கிறது.

minmax() செயல்பாடு: அளவு கட்டுப்பாடுகளை வரையறுத்தல்

minmax() செயல்பாடு ஒரு கிரிட் டிராக்கிற்கான குறைந்தபட்ச மற்றும் அதிகபட்ச அளவை வரையறுக்க உங்களை அனுமதிக்கிறது. இது வெவ்வேறு சூழ்நிலைகளில் டிராக்குகள் எவ்வாறு செயல்படுகின்றன என்பதில் அதிக கட்டுப்பாட்டை வழங்குகிறது, அவை மிகவும் சிறியதாகவோ அல்லது பெரியதாகவோ மாறுவதைத் தடுக்கிறது. இதன் தொடரியல் minmax(min, max) ஆகும், இங்கு min என்பது குறைந்தபட்ச அளவு மற்றும் max என்பது அதிகபட்ச அளவு.

minmax() க்கான பயன்பாட்டு வழக்குகள்

• உள்ளடக்கம் வழிவதைத் தடுத்தல்: ஒரு நெடுவரிசை அதன் உள்ளடக்கத்தின் அகலத்தை விட ஒருபோதும் குறுகலாக மாறாமல் இருப்பதை உறுதிசெய்து, உரை வழிவதைத் தடுக்கவும்.
• காட்சி சமநிலையை பராமரித்தல்: ஒரு நெடுவரிசையின் அதிகபட்ச அகலத்தைக் கட்டுப்படுத்தி, மற்ற நெடுவரிசைகளுடன் ஒப்பிடும்போது அது விகிதாசாரமற்றதாக மாறுவதைத் தடுக்கவும்.
• ரெஸ்பான்சிவ் பிரேக் பாயிண்ட்களை உருவாக்குதல்: ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்க திரை அளவிற்கு ஏற்ப min மற்றும் max மதிப்புகளை சரிசெய்யவும்.

எடுத்துக்காட்டு: குறைந்தபட்ச நெடுவரிசை அகலத்தை உறுதி செய்தல்

உங்களிடம் படங்களைக் கொண்ட ஒரு நெடுவரிசை இருப்பதாக வைத்துக்கொள்வோம். சிறிய திரைகளிலும் கூட, படங்கள் பொருந்தும் அளவுக்கு நெடுவரிசை எப்போதும் அகலமாக இருப்பதை உறுதிசெய்ய விரும்புகிறீர்கள்.

            .grid-container {
 display: grid;
 grid-template-columns: minmax(200px, 1fr) 2fr;
}

            

              
                Copy
              
            
          

இந்த நிலையில், முதல் நெடுவரிசை திரை அளவைப் பொருட்படுத்தாமல் 200px-ஐ விட குறுகலாக இருக்காது. கிடைக்கக்கூடிய இடம் 200px-ஐ விட குறைவாக இருந்தால், நெடுவரிசை கிரிட் கன்டெய்னரின் முழு அகலத்தையும் எடுத்துக்கொள்ளும், இதனால் இரண்டாவது நெடுவரிசை அடுத்த வரிசைக்கு மடிந்து செல்லும் (`grid-auto-flow` `row` என அமைக்கப்பட்டிருந்தால்). கிடைக்கக்கூடிய இடம் 200px-ஐ விட அதிகமாக இருந்தால், நெடுவரிசை கிடைக்கக்கூடிய இடத்தை விகிதாசாரமாக நிரப்ப விரிவடையும் (1fr மதிப்பால் வரையறுக்கப்பட்ட அதிகபட்சம் வரை).

minmax() மற்றும் fr ஐ இணைத்தல்

சக்திவாய்ந்த மற்றும் நெகிழ்வான லேஅவுட்களை உருவாக்க நீங்கள் minmax() மற்றும் fr ஐ இணைக்கலாம். உங்களுக்கு ஒரு முக்கிய உள்ளடக்கப் பகுதி மற்றும் ஒரு சைட்பார் தேவைப்படும் ஒரு சூழ்நிலையைக் கருத்தில் கொள்ளுங்கள். சைட்பார் குறைந்தபட்சம் 150px அகலம் கொண்டிருக்க வேண்டும், ஆனால் கிடைக்கக்கூடிய இடத்தின் 1fr வரை விரிவடையலாம். முக்கிய உள்ளடக்கப் பகுதி மீதமுள்ள இடத்தை எடுத்துக்கொள்ள வேண்டும்.

            .grid-container {
 display: grid;
 grid-template-columns: minmax(150px, 1fr) 2fr;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், சைட்பார் ஒருபோதும் 150px-ஐ விட குறுகலாக இருக்காது. கிடைக்கக்கூடிய இடம் குறைவாக இருந்தால், சைட்பார் 150px எடுத்துக்கொள்ளும், மற்றும் முக்கிய உள்ளடக்கப் பகுதி மீதமுள்ள இடத்தை எடுத்துக்கொள்ளும். போதுமான இடம் இருந்தால், சைட்பார் கிடைக்கக்கூடிய இடத்தின் 1fr வரை விரிவடையலாம், அதே நேரத்தில் முக்கிய உள்ளடக்கப் பகுதி 2fr எடுத்துக்கொள்ளும்.

minmax() மற்றும் அணுகல்தன்மை

minmax() ஐப் பயன்படுத்தும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது மிகவும் முக்கியம். உங்கள் குறைந்தபட்ச அளவுகள் வெவ்வேறு மொழிகளிலும் பல்வேறு எழுத்துரு அளவுகளிலும் உள்ளடக்கத்திற்கு இடமளிக்கும் அளவுக்கு பெரியதாக இருப்பதை உறுதிசெய்யவும். பார்வைக் குறைபாடுள்ள பயனர்கள் எழுத்துரு அளவுகளை அதிகரிக்கலாம், இது குறைந்தபட்ச அளவு மிகவும் சிறியதாக இருந்தால் உள்ளடக்கம் வழிந்து செல்ல காரணமாகலாம். வெவ்வேறு எழுத்துரு அளவுகள் மற்றும் மொழிகளுடன் உங்கள் லேஅவுட்களை சோதிப்பது அவசியம்.

எடுத்துக்காட்டு: நெகிழ்வான பட தொகுப்பு

வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு ஒரு நெகிழ்வான பட தொகுப்பை உருவாக்கவும். ஒவ்வொரு படத்திற்கும் காட்சித் தெளிவைப் பராமரிக்க குறைந்தபட்ச அகலம் இருக்க வேண்டும், ஆனால் தொகுப்பு கிடைக்கக்கூடிய இடத்தை நிரப்ப விரிவடைய வேண்டும்.

            .gallery-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 10px;
}

.gallery-item {
 width: 100%;
 height: auto;
}

.gallery-item img {
 width: 100%;
 height: auto;
 display: block;
}

            

              
                Copy
              
            
          

repeat(auto-fit, minmax(150px, 1fr)) குறைந்தது 150px அகலமுள்ள மற்றும் கிடைக்கக்கூடிய இடத்தை நிரப்ப விரிவடையும் நெடுவரிசைகளை உருவாக்குகிறது. auto-fit முக்கியச்சொல், திரை அளவிற்கு ஏற்ப தொகுப்பு டைனமிக்காக நெடுவரிசைகளின் எண்ணிக்கையை சரிசெய்வதை உறுதி செய்கிறது. தொகுப்பு உருப்படிகளுக்குள் உள்ள படங்கள் கன்டெய்னரை நிரப்ப width: 100% என அமைக்கப்பட்டுள்ளன.

auto முக்கியச்சொல்: உள்ளார்ந்த அளவு நிர்ணயம்

auto முக்கியச்சொல், கிரிட் ஒரு டிராக்கை அதன் உள்ளடக்கத்தின் அடிப்படையில் அளவிட அறிவுறுத்துகிறது. ஒரு டிராக் அதன் உள்ளடக்கத்தை வழிந்து செல்லாமல் இடமளிக்கும் அதே வேளையில் முடிந்தவரை சிறியதாக இருக்க வேண்டும் என நீங்கள் விரும்பும்போது இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

auto எவ்வாறு செயல்படுகிறது

auto பயன்படுத்தப்படும்போது, கிரிட் வழிமுறை டிராக்கிற்குள் உள்ள உள்ளடக்கத்தின் உள்ளார்ந்த அளவைக் கணக்கிடுகிறது. இந்த அளவு உள்ளடக்கத்தின் அகலம் அல்லது உயரத்தால் தீர்மானிக்கப்படுகிறது, அது ஒரு நெடுவரிசையா அல்லது வரிசையா என்பதைப் பொறுத்து. டிராக் பின்னர் உள்ளடக்கத்திற்கு இடமளிக்கும் வகையில் அதன் அளவை சரிசெய்கிறது.

auto க்கான பயன்பாட்டு வழக்குகள்

• உள்ளடக்கம்-சார்ந்த அளவு: ஒரு நெடுவரிசை அல்லது வரிசை அது கொண்டிருக்கும் உள்ளடக்கத்தின் அளவிற்கு ஏற்ப விரிவடைய அல்லது சுருங்க அனுமதிக்கவும்.
• நெகிழ்வான சைட்பார்களை உருவாக்குதல்: ஒரு சைட்பாரின் அகலமான உறுப்பின் அகலத்தின் அடிப்படையில் அதன் அளவை நிர்ணயிக்கவும்.
• ரெஸ்பான்சிவ் தலைப்புகள் மற்றும் அடிக்குறிப்புகளை செயல்படுத்துதல்: ஒரு தலைப்பு அல்லது அடிக்குறிப்பின் உயரத்தை அதன் உள்ளடக்கத்தின் உயரத்தின் அடிப்படையில் சரிசெய்யவும்.

எடுத்துக்காட்டு: உள்ளடக்கத்தின் அடிப்படையில் ஒரு நெடுவரிசையை அளவிடுதல்

உங்களிடம் ஒரு சைட்பார் மற்றும் ஒரு முக்கிய உள்ளடக்கப் பகுதியுடன் ஒரு கிரிட் இருப்பதாக வைத்துக்கொள்வோம். சைட்பார் அதன் அகலமான உறுப்புக்கு இடமளிக்கும் அளவுக்கு அகலமாக இருக்க வேண்டும், ஆனால் அகலமாக இருக்கக்கூடாது. முக்கிய உள்ளடக்கப் பகுதி மீதமுள்ள இடத்தை எடுத்துக்கொள்ள வேண்டும்.

            .grid-container {
 display: grid;
 grid-template-columns: auto 1fr;
}

            

              
                Copy
              
            
          

இந்த நிலையில், சைட்பார் அதன் உள்ளடக்கத்திற்குப் பொருந்தும் வகையில் அதன் அகலத்தை தானாகவே சரிசெய்யும். சைட்பாரில் உள்ள அகலமான உறுப்பு 250px அகலமாக இருந்தால், சைட்பார் 250px அகலமாக இருக்கும். முக்கிய உள்ளடக்கப் பகுதி பின்னர் மீதமுள்ள இடத்தை எடுத்துக்கொள்ளும்.

auto ஐ minmax() உடன் இணைத்தல்

தானாகவே அளவிடப்படும் ஒரு டிராக்கிற்கு குறைந்தபட்ச மற்றும் அதிகபட்ச அளவை வரையறுக்க நீங்கள் auto ஐ minmax() உடன் இணைக்கலாம். உதாரணமாக, ஒரு நெடுவரிசை குறைந்தபட்சம் 100px அகலமாக இருக்க வேண்டும், ஆனால் அதன் உள்ளடக்கத்தின் அடிப்படையில் தானாகவே 300px அதிகபட்ச அகலம் வரை விரிவடைய வேண்டும் என நீங்கள் விரும்பலாம்.

            .grid-container {
 display: grid;
 grid-template-columns: minmax(100px, auto) 1fr;
}

            

              
                Copy
              
            
          

இங்கே, முதல் நெடுவரிசை ஒருபோதும் 100px ஐ விட குறுகலாக இருக்காது. நெடுவரிசைக்குள் உள்ள உள்ளடக்கத்திற்கு அதிக இடம் தேவைப்பட்டால், நெடுவரிசை அதிகபட்சம் 300px வரை விரிவடையும். அதற்கு அப்பால், நெடுவரிசையின் அகலம் 300px இல் நிலைநிறுத்தப்படும். மீதமுள்ள இடம் 1fr நெடுவரிசைக்கு கொடுக்கப்படுகிறது.

auto மற்றும் டைனமிக் உள்ளடக்கம்

டைனமிக் உள்ளடக்கத்தைக் கையாளும்போது auto முக்கியச்சொல் குறிப்பாக பயனுள்ளதாக இருக்கும், அங்கு உள்ளடக்கத்தின் அளவு கணிசமாக மாறுபடலாம். உதாரணமாக, ஒரு இ-காமர்ஸ் இணையதளத்தில், தயாரிப்புப் பெயர்கள் மற்றும் விளக்கங்களின் நீளம் மாறுபடலாம். auto ஐப் பயன்படுத்துவதன் மூலம், வடிவமைப்பை உடைக்காமல் இந்த மாறுபாடுகளுக்கு இடமளிக்கும் வகையில் உங்கள் லேஅவுட் மாற்றியமைக்கப்படுவதை உறுதிசெய்யலாம்.

எடுத்துக்காட்டு: டைனமிக் தயாரிப்பு பட்டியல்

ஒரு டைனமிக் தயாரிப்பு பட்டியலை உருவாக்கவும், அங்கு ஒவ்வொரு தயாரிப்பு அட்டையின் அகலமும் தயாரிப்புப் பெயரின் நீளத்தின் அடிப்படையில் சரிசெய்யப்படும்.

            .product-listing {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, auto));
 gap: 10px;
}

.product-card {
 border: 1px solid #ccc;
 padding: 10px;
}

.product-name {
 font-weight: bold;
}

            

              
                Copy
              
            
          

repeat(auto-fit, minmax(150px, auto)) குறைந்தது 150px அகலமுள்ள மற்றும் தயாரிப்புப் பெயரின் நீளத்தின் அடிப்படையில் தானாகவே விரிவடையும் நெடுவரிசைகளை உருவாக்குகிறது. auto-fit முக்கியச்சொல், திரை அளவு மற்றும் ஒவ்வொரு தயாரிப்பு அட்டையின் உள்ளடக்கத்தின் அடிப்படையில் பட்டியல் டைனமிக்காக நெடுவரிசைகளின் எண்ணிக்கையை சரிசெய்வதை உறுதி செய்கிறது.

மேம்பட்ட லேஅவுட்களுக்கு டிராக் செயல்பாடுகளை இணைத்தல்

CSS Grid டிராக் செயல்பாடுகளின் உண்மையான சக்தி, சிக்கலான மற்றும் டைனமிக் லேஅவுட்களை உருவாக்க அவற்றை இணைக்கும் திறனில் உள்ளது. fr, minmax(), மற்றும் auto ஆகியவற்றை மூலோபாய ரீதியாக இணைப்பதன் மூலம், பாரம்பரிய CSS லேஅவுட் நுட்பங்களுடன் முன்பு அடைய முடியாத ஒரு நிலை கட்டுப்பாடு மற்றும் நெகிழ்வுத்தன்மையை நீங்கள் அடையலாம்.

எடுத்துக்காட்டு: ரெஸ்பான்சிவ் டாஷ்போர்டு லேஅவுட்

ஒரு நிலையான-அகல சைட்பார், ஒரு நெகிழ்வான முக்கிய உள்ளடக்கப் பகுதி, மற்றும் அதன் உள்ளடக்கத்திற்கு ஏற்றவாறு ஒரு வலது சைட்பார் கொண்ட ஒரு ரெஸ்பான்சிவ் டாஷ்போர்டு லேஅவுட்டை உருவாக்கவும்.

            .dashboard-container {
 display: grid;
 grid-template-columns: 200px 1fr auto;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
 "header header header"
 "sidebar main right"
 "footer footer footer";
 height: 100vh; /* or however you want to handle your layout height */
}

header {
 grid-area: header;
 background-color: #f0f0f0;
 padding: 20px;
}

sidebar {
 grid-area: sidebar;
 background-color: #e0e0e0;
 padding: 20px;
}

main {
 grid-area: main;
 padding: 20px;
}

right {
 grid-area: right;
 background-color: #d0d0d0;
 padding: 20px;
}

footer {
 grid-area: footer;
 background-color: #f0f0f0;
 padding: 20px;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், சைட்பார் 200px நிலையான அகலத்தைக் கொண்டுள்ளது, முக்கிய உள்ளடக்கப் பகுதி மீதமுள்ள இடத்தை (1fr) எடுத்துக்கொள்கிறது, மற்றும் வலது சைட்பார் அதன் உள்ளடக்கத்திற்கு (auto) ஏற்றவாறு மாறுகிறது. தலைப்பு மற்றும் அடிக்குறிப்பு டாஷ்போர்டின் முழு அகலத்திலும் நீண்டுள்ளது. இந்த லேஅவுட் மிகவும் ரெஸ்பான்சிவாக உள்ளது மற்றும் வெவ்வேறு திரை அளவுகள் மற்றும் உள்ளடக்க மாறுபாடுகளுக்கு நன்றாக பொருந்துகிறது. grid-template-areas பெயரிடப்பட்ட கிரிட் பகுதிகளை வழங்குகிறது, இது வாசிப்புத்திறன் மற்றும் பராமரிப்பை மேம்படுத்துகிறது.

CSS Grid டிராக் செயல்பாடுகளைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

• உங்கள் லேஅவுட்டைத் திட்டமிடுங்கள்: எந்தவொரு குறியீட்டையும் எழுதுவதற்கு முன், உங்கள் லேஅவுட்டை கவனமாகத் திட்டமிட்டு, நெகிழ்வாக இருக்க வேண்டிய பகுதிகள் மற்றும் நிலையானதாக இருக்க வேண்டிய பகுதிகளை அடையாளம் காணவும்.
• சரியான அலகுகளைத் தேர்வுசெய்க: ஒவ்வொரு டிராக்கின் குறிப்பிட்ட தேவைகளின் அடிப்படையில் பொருத்தமான அலகுகளை (fr, px, em, auto) தேர்ந்தெடுக்கவும்.
• minmax() ஐ புத்திசாலித்தனமாகப் பயன்படுத்தவும்: அளவு கட்டுப்பாடுகளை வரையறுக்கவும், உள்ளடக்க வழிவைத் தடுக்கவும் minmax() ஐப் பயன்படுத்தவும்.
• முழுமையாக சோதிக்கவும்: உங்கள் லேஅவுட்கள் ரெஸ்பான்சிவாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிப்படுத்த, வெவ்வேறு திரை அளவுகளிலும் வெவ்வேறு உள்ளடக்க அளவுகளிலும் அவற்றைச் சோதிக்கவும்.
• சர்வதேசமயமாக்கலைக் கருத்தில் கொள்ளுங்கள்: உங்கள் லேஅவுட்களை வடிவமைக்கும்போது வெவ்வேறு மொழிகளில் உரை நீளத்தில் உள்ள வேறுபாடுகளைக் கணக்கில் எடுத்துக்கொள்ளுங்கள்.
• அணுகல்தன்மைக்கு முன்னுரிமை கொடுங்கள்: CSS Grid ஐப் பயன்படுத்தும்போது எப்போதும் அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள். உங்கள் லேஅவுட்கள் மாற்றுத்திறனாளிகளால் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிசெய்யவும்.

குறுக்கு-உலாவி இணக்கத்தன்மை

CSS Grid சிறந்த குறுக்கு-உலாவி இணக்கத்தன்மையைக் கொண்டுள்ளது, அனைத்து முக்கிய நவீன உலாவிகளிலும் ஆதரவு உள்ளது. இருப்பினும், உங்கள் லேஅவுட்கள் சரியாக வழங்கப்படுவதை உறுதிசெய்ய அவற்றை வெவ்வேறு உலாவிகளில் சோதிப்பது எப்போதும் ஒரு நல்ல யோசனையாகும். பழைய உலாவிகளுக்கு நீங்கள் விற்பனையாளர் முன்னொட்டுகளை (எ.கா., இன்டர்நெட் எக்ஸ்ப்ளோரருக்கு -ms-) பயன்படுத்த வேண்டியிருக்கலாம், ஆனால் இது அரிதாகி வருகிறது.

முடிவுரை

CSS Grid டிராக் செயல்பாடுகள் வலைக்கான டைனமிக் மற்றும் ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்க ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகின்றன. fr அலகு, minmax() செயல்பாடு, மற்றும் auto முக்கியச்சொல் ஆகியவற்றில் தேர்ச்சி பெறுவதன் மூலம், வெவ்வேறு திரை அளவுகள், உள்ளடக்க அளவுகள், மற்றும் சர்வதேசமயமாக்கல் தேவைகளுக்கு தடையின்றி மாற்றியமைக்கக்கூடிய லேஅவுட்களை நீங்கள் உருவாக்கலாம். இந்த நுட்பங்களைத் தழுவி, உங்கள் வலை வடிவமைப்பு திட்டங்களுக்கு CSS Grid-இன் முழு திறனையும் வெளிக்கொணருங்கள். உங்கள் லேஅவுட்களை முழுமையாகச் சோதிக்கவும், உலகளாவிய பார்வையாளர்களுக்கு உண்மையான உள்ளடக்கிய மற்றும் பயனர் நட்பு அனுபவங்களை உருவாக்க வளர்ச்சி செயல்முறை முழுவதும் அணுகல்தன்மையைக் கருத்தில் கொள்ளவும் நினைவில் கொள்ளுங்கள்.